<template>
	<view class="ys" v-if="show_form">
		<view class="row">
			<view class="title">
				<text>*</text>请上传清晰完整的身份证正反面
			</view>
			<view class="box idcard">
				<view class="imgbox">
					<view class="imgitem" @click="uploadImg('idCardImage')">
						<image :src="userinfo.idCardImage || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.idCardImage == ''">上传身份证国徽面</text>
					</view>
					<view class="imgitem" @click="uploadImg('idCardImageReverse')">
						<image :src="userinfo.idCardImageReverse || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.idCardImageReverse == ''">上传身份证人像面</text>
					</view>
				</view>
			</view>
			<view class="title">
				<text>*</text>请上传清晰完整的手持身份证图片
			</view>
			<view class="box idcard">
				<view class="imgbox">
					<view class="imgitem" @click="uploadImg('idCardImageHand')">
						<image :src="userinfo.idCardImageHand || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.idCardImageHand == ''">上传手持身份证图片</text>
					</view>
				</view>
			</view>
			<view class="title">
				<text>*</text>请上传头像
			</view>
			<view class="box idcard">
				<view class="imgbox">
					<view class="imgitem" @click="uploadImg('avatar')">
						<image :src="userinfo.avatar || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.avatar == ''">上传头像</text>
					</view>
				</view>
			</view>
			<view class="title">
				<text>*</text>请上传高清一寸照片
			</view>
			<view class="box idcard">
				<view class="imgbox">
					<view class="imgitem" @click="uploadImg('faceImage')">
						<image :src="userinfo.faceImage || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="userinfo.faceImage == ''">上传一寸照片</text>
					</view>
				</view>
			</view>
			<view class="landlordbox" v-if="type == 'landlord'">
				<view class="title">
					<text>*</text>请上传清晰完整的房产证照片
				</view>
				<view class="box idcard">
					<view class="imgbox">
						<view class="imgitem" @click="uploadImg('house_images')">
							<image :src="houseImages || '/static/img/sfz.jpg'" mode="aspectFill"></image>
							<text>上传房产证照片</text>
						</view>
					</view>
				</view>
			</view>
			<view class="title">
				<text>*</text>请选择部门id / 所属社区的id
			</view>
			<view class="box deptbox">
				<view class="li">
					<text>部门/所属社区</text>
					<view class="right">
						<uni-data-picker v-model="userinfo.deptId" :preload="true" :border="false" :map="map"
							placeholder="请选择部门id / 所属社区的id"
							:readonly="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4"
							:clearIcon="false" popup-title="部门/所属社区" @change="onchange" :ellipsis="true"
							:localdata="deptRange" @nodeclick="nodeclick"></uni-data-picker>
					</view>
				</view>
			</view>
			<view class="title">
				<text>*</text>请填写个人基本信息
			</view>
			<view class="box">
				<view class="li">
					<text>姓名</text>
					<view class="right">
						<input type="text" placeholder="填写本人姓名" v-model="userinfo.tenantName">
					</view>
				</view>
				<view class="li">
					<text>昵称</text>
					<view class="right">
						<input type="text" placeholder="填写本人昵称" v-model="userinfo.nickname"
							:disabled="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4">
					</view>
				</view>
				<view class="li">
					<text>性别</text>
					<view class="right">
						<radio-group name="" @change="changeSex">
							<label>
								<radio value="0" :checked="userinfo.tenantGender == 0"
									:disabled="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4" />
								<text>男</text>
							</label>
							<label>
								<radio value="1" :checked="userinfo.tenantGender == 1"
									:disabled="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4" />
								<text>女</text>
							</label>
							<label>
								<radio value="2" :checked="userinfo.tenantGender == 2"
									:disabled="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4" />
								<text>未知</text>
							</label>
						</radio-group>

					</view>
				</view>
				<view class="li">
					<text>年龄</text>
					<view class="right">
						<input type="text" placeholder="填写本人年龄" v-model="userinfo.tenantAge"
							:disabled="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4">
					</view>
				</view>
				<view class="li" v-if="type != 'landlord'">
					<text>民族</text>
					<view class="right">
						<input type="text" placeholder="填写本人民族" v-model="userinfo.tenantNation"
							:disabled="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4">
					</view>
				</view>
				<view class="li">
					<text>身份证号</text>
					<view class="right">
						<input type="text" placeholder="填写本人身份证号" maxlength="18" v-model="userinfo.tenantIdentityNum"
							:disabled="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4">
					</view>
				</view>
			</view>
			<view class="title">
				<text>*</text>请填写联系方式
			</view>
			<view class="box">
				<view class="li">
					<text>手机号</text>
					<view class="right">
						<input type="number" placeholder="填写本人手机号" v-model="userinfo.tenantMobile"
							:disabled="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4">
					</view>
				</view>
			</view>
			<view class="title">
				备注
			</view>
			<view class="box">
				<view class="li">
					<textarea maxlength="-1" v-model="userinfo.notes" placeholder="请输入备注"
						:disabled="userinfo.status == 1 || userinfo.status == 3 || userinfo.status == 4"></textarea>
				</view>

			</view>

		</view>
		<view class="footer" v-if="statusType[userinfo.status]">
			<button @click="sumbit" :loading="loading" :class="statusType[userinfo.status].disabled?'disable':''"
				:disabled="statusType[userinfo.status].disabled">{{statusType[userinfo.status].text}}</button>
		</view>
	</view>
</template>

<script>
	import {
		updateTenant,
		getTenantDetail,
		deptList,
		deptNodes,
		insetLandlord,
		landlordDetail,
		getTenantIsShow
	} from "@/api/api.js"
	export default {
		data() {
			return {
				type: '',
				loading: false,
				userinfo: {
					avatar: '', //头像
					idCardImage: '', //身份证正面照片
					idCardImageReverse: '', //身份证反面照
					idCardImageHand: '', //手持身份证照
					faceImage: '', //一寸照片
					tenantAge: '', //年龄
					tenantGender: '', //性别
					tenantName: '', //租户姓名
					nickname: '', //昵称
					tenantNation: '', //民族@
					tenantIdentityNum: '', //租户身份证号
					notes: '', //备注
					tenantMobile: '', //联系方式
					tenantId: '',
					deptId: '',
					status: ''
				},
				houseImages: '',
				deptRange: [],
				map: {
					text: 'name',
					value: 'id'
				},
				dept: [],
				parentId: 100,
				statusType: {
					0: {
						text: '提交',
						disabled: false
					},
					1: {
						text: '已审核',
						disabled: true
					},
					2: {
						text: '已拒绝，重新提交',
						disabled: false
					},
					3: {
						text: '黑名单，无法提交',
						disabled: true
					},
					4: {
						text: '审核中',
						disabled: true
					},
				}
			}
		},
		onLoad(e) {
			this.getTenantIsShow()
			if (e.type == 'landlord') {
				this.type = e.type
				uni.setNavigationBarTitle({
					title: '房东申请'
				})
				this.landlordDetail()
			} else {
				this.getTenantDetail()
			}

			this.deptList()
		},
		methods: {
			getTenantIsShow() {
				getTenantIsShow().then(res => {
					this.show_form = res.data
				})
			},
			nodeclick(e) {
				console.log(e);
			},
			onchange(e) {
				let data = e.detail.value
				this.dept = data[data.length - 1]
				this.userinfo.deptId = this.dept.value
				this.deptId = this.dept.value
			},
			deptList() {
				deptNodes({
					parentId: this.parentId
				}).then(res => {
					if (res.code == 200) {
						this.deptRange = res.data
					}
				})
			},
			getTenantDetail() {
				getTenantDetail().then(res => {
					if (res.code == 200) {
						this.userinfo.tenantId = res.data.tenantId
						let data = res.data
						this.userinfo = {
							...this.userinfo,
							...data
						}
						this.userinfo.deptId = Number(res.data.deptId)
					}
				})
			},
			landlordDetail() {
				landlordDetail().then(res => {
					if (res.code == 200) {
						this.userinfo.tenantId = res.data.tenantId
						let data = res.data
						this.userinfo = {
							...this.userinfo,
							...data
						}
						this.houseImages = data.houseImages
					}
				})
			},
			uploadImg(type) {
				if (this.userinfo.status == 1 || this.userinfo.status == 3 || this.userinfo.status == 4) return
				let that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: `${that.$config.websiteUrl}common/upload`,
								header: {
									'Authorization': uni.getStorageSync('token')
								},
								filePath: igmFile[i],
								name: 'file',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.code == 200) {
										let imgData = imgRes
										// idCardImage: '', //身份证正面照片
										// idCardImageReverse: '', //身份证反面照
										// idCardImageHand: '', //手持身份证照
										if (type == 'idCardImage') {
											that.userinfo.idCardImage = imgData.url
										} else if (type == 'idCardImageReverse') {
											that.userinfo.idCardImageReverse = imgData.url
										} else if (type == 'idCardImageHand') {
											that.userinfo.idCardImageHand = imgData.url
										} else if (type == 'avatar') {
											that.userinfo.avatar = imgData.url
										} else if (type == 'faceImage') {
											that.userinfo.faceImage = imgData.url
										} else if (type == 'house_images') {
											that.houseImages = imgData.url
										}
									} else {
										return uni.$showMsg(res.msg)
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			changeSex(e) {
				this.userinfo.tenantGender = e.detail.value
			},
			sumbit() {
				if (!this.userinfo.avatar || this.userinfo.avatar == '') return uni.$showMsg('请上传头像')
				if (!this.userinfo.idCardImage || this.userinfo.idCardImage == '') return uni.$showMsg('请上传身份证正面照片')
				if (!this.userinfo.idCardImageReverse || this.userinfo.idCardImageReverse == '') return uni.$showMsg(
					'请上传手持身份证照')
				if (!this.userinfo.idCardImageHand || this.userinfo.idCardImageHand == '') return uni.$showMsg('请上传手持身份证照')
				if (!this.userinfo.tenantName || this.userinfo.tenantName == '') return uni.$showMsg('请填写姓名')
				if (!this.userinfo.tenantIdentityNum || this.userinfo.tenantIdentityNum == '') return uni.$showMsg(
					'请填写身份证号码')
				if (!this.userinfo.tenantMobile || this.userinfo.tenantMobile == '') return uni.$showMsg('请填写手机号')
				if (!this.userinfo.deptId || this.userinfo.deptId == '') return uni.$showMsg('请选择部门id / 所属社区的id')

				this.loading = true
				var that = this
				if (that.type == 'landlord') {
					let data = {
						houseImages: that.houseImages,
					}
					insetLandlord({
						...that.userinfo,
						...data
					}).then(res => {
						uni.$showMsg(res.msg)
						that.loading = false
						if (res.code == 200) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				} else {
					updateTenant(that.userinfo).then(res => {
						uni.$showMsg(res.msg)
						that.loading = false
						if (res.code == 200) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.ys {
		background: #F1F4F3;
		height: 100%;
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 70px;
	}

	radio {
		transform: scale(.7);
	}

	.imgitem {
		position: relative;
		width: 49%;

		image {
			width: 100%;
		}

		text {
			position: absolute;
			top: 75%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 12px;
			color: #777;
			display: block;
			text-align: center;
			width: 100%;
		}
	}


	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding: 5px 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 20;

		button {
			background: #000;
			color: #1FFD91;
			border-radius: 20px;
			width: 96%;
			margin: 0 auto;
			font-weight: bold;
		}

		.disable {
			background: #ccc;
			color: #fff;
		}
	}

	.row {
		padding: 0 10px;

		.title {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #777;
			margin-top: 10px;

			text {
				color: #f00;
			}
		}

		.box {
			background: #fff;
			padding: 10px;
			box-sizing: border-box;
			margin-top: 10px;
			border-radius: 12px;

			textarea {
				font-size: 14px;
				width: 100%;
				box-sizing: border-box;
			}

			&.deptbox {
				.li {
					align-items: center;
					padding: 0;
				}
			}

			.li {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 15px 0;
				border-bottom: 1px solid #eee;

				.right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 62%;
					font-size: 15px;
					color: #777;
					overflow: hidden;

					input {
						text-align: right;
						font-size: 14px;
						width: 100%;
					}


					.time {
						background: #f2f2f2;
						width: 80px;
						display: block;
						font-size: 12px;
						height: 25px;
						line-height: 25px;
						margin: 0 4px;
						text-align: center;
						color: #777;
					}
				}

				&:last-child {
					border-bottom: 0;
				}
			}

			.noli {
				border-bottom: 0;
				padding-top: 5px;
			}
		}

		.idcard {

			.imgbox {
				display: flex;
				justify-content: space-between;
				justify-content: space-between;
			}

			image {
				width: 100%;
				height: 100px;
			}
		}
	}
</style>